<template>
    <div class="home">
        <Header colors="Home"></Header>
        <div class="big-image">
            <img src="../../assets/img/home-banner.png" alt="">
        </div>
        <div class="company-profile">
            <div class="head">
                <span></span>
                <h2>指尖互动</h2>
                <p>互联网·新媒体·推广与营销服务提供商</p>
            </div>
            <div class="content">
                <div class="advantage">
                    <div class="image">
                        <div>
                             <img src="../../assets/img/advantage.png" alt="">
                        </div>
                    </div>
                    <div class="words">
                        <h3>优势</h3>
                        <p>汇聚国内外主流的一线媒体与渠道资源</p>
                    </div>
                </div>
                <div class="strategy">
                    <div class="image-1">
                        <div>
                             <img src="../../assets/img/strategy.png" alt="">
                        </div>
                    </div>
                    <div class="words-1">
                        <h3>策略</h3>
                        <p>采用精准定向投放的营销传播策略</p>
                    </div>
                </div>
                <div class="custom-made">
                    <div class="image-2">
                        <div>
                             <img src="../../assets/img/custom-made.png" alt="">
                        </div>
                    </div>
                    <div class="words-2">
                        <h3>定制</h3>
                        <p>提供一站式定制化渠道与媒体推广方案</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="category">
            <header>
                <span></span>
                <h2>服务范畴</h2>
            </header>
            <div class="content">
                <ul>
                    <li class="seo"  @click="showTime('seo')" >
                        <div>
                            <img src="../../assets/img/seo.png" alt="">
                        </div>
                        <h3 :style="{color:colorshow_4}">SEO/SEM优化</h3>
                    </li>
                    <li class="new-media" @click="showTime('new_media')" >
                        <div>
                            <img src="../../assets/img/new-media.png" alt="">
                        </div>
                        <h3 :style="{color:colorshow_1}">新媒体运营与营销</h3>
                    </li>
                    <li class="brand" @click="showTime('brand')" >
                         <div>
                            <img src="../../assets/img/brand.png" alt="">
                        </div>
                        <h3 :style="{color:colorshow_2}">企业品牌提升</h3>
                    </li>
                </ul>
                <div class="center-words">
                    <transition  name="no-mode-translate-fade">
                        <div class="words" v-show="seo_show">
                            <p>在线直播营销，及微电影、访谈、个人或企业MV定制拍摄。</p>
                        </div>
                    </transition>
                    <transition mode="out-in" name="no-mode-translate-fade">
                        <div class="words words-1" v-show="new_media_show">
                            <p>微信朋友圈、微信公众号、微博大v、微站点、网红、直播、视频、新闻网等新媒体营销。</p>
                        </div>
                    </transition>
                    <transition mode="out-in" name="no-mode-translate-fade">
                        <div class="words words-2" v-show="brand_show">
                            <p>品牌整合营销推广，品牌战略管理，营销品牌策划，形象创意设计，助力产品力提升。</p>
                        </div>
                    </transition>
                    <transition mode="out-in" name="no-mode-translate-fade">
                         <div class="words words-3" v-show="news_show">
                            <p>平面媒体：如报纸、杂志；电子媒体：如电视、广播；实体广告如高铁广告、路牌等。</p>
                        </div>
                    </transition>
                    <transition mode="out-in" name="no-mode-translate-fade">
                        <div class="words words-4" v-show="promotion_show">
                            <p>通过市场推广或技术手段，短时间内获得海量高质量低成本的自然用户，使产品和品牌在搜索结果和各榜单中排名获得大幅度提升。</p>
                        </div>
                    </transition>
                    <transition mode="out-in" name="no-mode-translate-fade">
                        <div class="words words-5" v-show="advertising_show">
                            <p>为产品分析目标人群，分阶段定制推广计划，精准投放；支持小规模试量，可根据效果结算，节约成本。</p>
                        </div>
                    </transition>
                </div>
                <ul class="two-ul">
                    <li class="news"  @click="showTime('news')" >
                        <div>
                            <img src="../../assets/img/news.png" alt="">
                        </div>
                        <h3 :style="{color:colorshow_3}">新闻营销</h3>
                    </li>
                     <li class="promotion" @click="showTime('promotion')" >
                        <div>
                            <img src="../../assets/img/promotion.png" alt="">
                        </div>
                        <h3 :style="{color:colorshow}">移动客户端推广</h3>
                    </li>
                    <li class="advertising"  @click.stop="showTime('advertising')" >
                        <div>
                            <img src="../../assets/img/advertising.png" alt="">
                        </div>
                        <h3 :style="{color:colorshow_5}">广告投放</h3>
                    </li>
                </ul>
            </div>
        </div>
        <div class="client">
            <div class="head">
                <span></span>
                <h2>他们选择了指尖</h2>
            </div>
            <div class="icon">
                <div class="swiper">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <ul>
                                    <li><img src="../../assets/img/1.png" alt=""></li>
                                    <li><img src="../../assets/img/2.png" alt=""></li>
                                    <li><img src="../../assets/img/3.png" alt=""></li>
                                    <li><img src="../../assets/img/4.png" alt=""></li>
                                    <li><img src="../../assets/img/5.png" alt=""></li>
                                    <li><img src="../../assets/img/6.png" alt=""></li>
                                    <li><img src="../../assets/img/7.png" alt=""></li>
                                    <li><img src="../../assets/img/8.png" alt=""></li>
                                    <li><img src="../../assets/img/9.png" alt=""></li>
                                    <li><img src="../../assets/img/10.png" alt=""></li>
                                </ul>
                            </div>
                            <div class="swiper-slide">
                                <ul>
                                    <li><img src="../../assets/img/11.png" alt=""></li>
                                    <li><img src="../../assets/img/12.png" alt=""></li>
                                    <li><img src="../../assets/img/13.png" alt=""></li>
                                    <li><img src="../../assets/img/14.png" alt=""></li>
                                    <li><img src="../../assets/img/15.png" alt=""></li>
                                    <li><img src="../../assets/img/16.png" alt=""></li>
                                    <li><img src="../../assets/img/17.png" alt=""></li>
                                    <li><img src="../../assets/img/18.png" alt=""></li>
                                    <li><img src="../../assets/img/19.png" alt=""></li>
                                    <li><img src="../../assets/img/20.png" alt=""></li>
                                </ul>
                            </div>
                            <div class="swiper-slide">
                                <ul>
                                    <li><img src="../../assets/img/21.png" alt=""></li>
                                    <li><img src="../../assets/img/22.png" alt=""></li>
                                    <li><img src="../../assets/img/23.png" alt=""></li>
                                    <li><img src="../../assets/img/24.png" alt=""></li>
                                    <li><img src="../../assets/img/25.png" alt=""></li>
                                    <li><img src="../../assets/img/26.png" alt=""></li>
                                    <li><img src="../../assets/img/27.png" alt=""></li>
                                    <li><img src="../../assets/img/28.png" alt=""></li>
                                    <li><img src="../../assets/img/29.png" alt=""></li>
                                    <li><img src="../../assets/img/30.png" alt=""></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>
        </div>
        <ContactUs/>
        <div class="top" v-show="backToTop">
            <a href="#"></a>
        </div>
        <div class="footer">
            <p>Copyright © 2016-2018 指尖互动 All Rights Reserved | </p>
            <a href="http://www.miitbeian.gov.cn/" target="_blank">闽ICP备16031728号-1</a>
        </div>
    </div>
</template>
<script>
import Header from '../common/components/Header'
import ContactUs from '../common/components/ContactUs'
import Swiper from 'swiper'
export default {
    name: 'Home',
    data () {
        return {
            promotion_show: false,
            new_media_show: false,
            brand_show: false,
            news_show: false,
            seo_show: true,
            advertising_show: false,
            colorshow: null,
            colorshow_1: null,
            colorshow_2: null,
            colorshow_3: null,
            colorshow_4: null,
            colorshow_5: null,
            n: 1,
            setIntervalId: null,
            scrollTop: 0,
            backToTop: false
        }
    },
    components: {
        Header,
        ContactUs
    },
    methods: {
        showTime (parameter) {
            if (parameter == 'promotion') {
                this.promotion_show = true
                this.new_media_show = false
                this.brand_show = false
                this.seo_show =false
                this.advertising_show = false
                this.news_show = false
                this.colorshow = '#1e90ff'
                this.colorshow_1 = null
                this.colorshow_2 = null
                this.colorshow_3 = null
                this.colorshow_4 = '#05173b'
                this.colorshow_5 = null
                this.n = 5
            }
            else if (parameter == 'new_media') {
                this.new_media_show = true
                this.promotion_show = false
                this.brand_show = false
                this.seo_show =false
                this.advertising_show = false
                this.news_show = false
                this.colorshow_1 = '#1e90ff'
                this.colorshow = null
                this.colorshow_2 = null
                this.colorshow_3 = null
                this.colorshow_4 = '#05173b'
                this.colorshow_5 = null
                this.n = 2
            }
            else if (parameter == 'brand') {
                this.brand_show = true
                this.promotion_show = false
                this.new_media_show = false
                this.seo_show =false
                this.advertising_show = false
                this.news_show = false
                this.colorshow_2 = '#1e90ff'
                this.colorshow_1 = null
                this.colorshow = null
                this.colorshow_3 = null
                this.colorshow_4 = '#05173b'
                this.colorshow_5 = null
                this.n = 3
            }
            else if (parameter == 'news') {
                this.news_show = true
                this.promotion_show = false
                this.brand_show = false
                this.seo_show =false
                this.advertising_show = false
                this.new_media_show = false
                this.colorshow_3 = '#1e90ff'
                this.colorshow_1 = null
                this.colorshow_2 = null
                this.colorshow = null
                this.colorshow_4 = '#05173b'
                this.colorshow_5 = null
                this.n = 4
            }
            else if (parameter == 'seo') {
                this.seo_show = true
                this.promotion_show = false
                this.brand_show = false
                this.advertising_show = false
                this.news_show = false
                this.new_media_show = false
                this.colorshow_4 = '#1e90ff'
                this.colorshow_1 = null
                this.colorshow_2 = null
                this.colorshow_3 = null
                this.colorshow = null
                this.colorshow_5 = null
                this.n = 1
            }
            else if (parameter == 'advertising') {
                this.advertising_show = true
                this.promotion_show = false
                this.brand_show = false
                this.seo_show =false
                this.news_show = false
                this.new_media_show = false
                this.colorshow_5 = '#1e90ff'
                this.colorshow_1 = null
                this.colorshow_2 = null
                this.colorshow_3 = null
                this.colorshow_4 = '#05173b'
                this.colorshow = null
                this.n = 0
            }
        },
        showTime_1 () {
            if (this.n == 0) {
                this.seo_show = true
                this.promotion_show = false
                this.brand_show = false
                this.advertising_show = false
                this.news_show = false
                this.new_media_show = false
                this.colorshow_4 = '#1e90ff'
                this.colorshow_1 = null
                this.colorshow_2 = null
                this.colorshow_3 = null
                this.colorshow = '#05173b'
                this.colorshow_5 = null
                this.n++
            }
            else if (this.n == 1) {
                this.new_media_show = true
                this.promotion_show = false
                this.brand_show = false
                this.seo_show =false
                this.advertising_show = false
                this.news_show = false
                this.colorshow_1 = '#1e90ff'
                this.colorshow = null
                this.colorshow_2 = null
                this.colorshow_3 = null
                this.colorshow_4 = '#05173b'
                this.colorshow_5 = null
                this.n++
            }
            else if (this.n == 2) {
                this.brand_show = true
                this.promotion_show = false
                this.new_media_show = false
                this.seo_show =false
                this.advertising_show = false
                this.news_show = false
                this.colorshow_2 = '#1e90ff'
                this.colorshow_1 = null
                this.colorshow = null
                this.colorshow_3 = null
                this.colorshow_4 = '#05173b'
                this.colorshow_5 = null
                this.n++
            }
            else if (this.n == 3) {
                this.news_show = true
                this.promotion_show = false
                this.brand_show = false
                this.seo_show =false
                this.advertising_show = false
                this.new_media_show = false
                this.colorshow_3 = '#1e90ff'
                this.colorshow_1 = null
                this.colorshow_2 = null
                this.colorshow = null
                this.colorshow_4 = '#05173b'
                this.colorshow_5 = null
                this.n++
            }
            else if (this.n == 4) {
                this.promotion_show = true
                this.new_media_show = false
                this.brand_show = false
                this.seo_show = false
                this.advertising_show = false
                this.news_show = false
                this.colorshow = '#1e90ff'
                this.colorshow_1 = null
                this.colorshow_2 = null
                this.colorshow_3 = null
                this.colorshow_4 = '#05173b'
                this.colorshow_5 = null
                this.n++
            }
            else if (this.n ==5) {
                this.advertising_show = true
                this.promotion_show = false
                this.brand_show = false
                this.seo_show =false
                this.news_show = false
                this.new_media_show = false
                this.colorshow_5 = '#1e90ff'
                this.colorshow_1 = null
                this.colorshow_2 = null
                this.colorshow_3 = 
                this.colorshow_4 = '#05173b'
                this.colorshow = null
                this.n = 0
            }
        },
        cleanScrollTop () {
            this.scrollTop = window.scrollY
            if (this.scrollTop >= 500) {
                this.setIntervalId = setInterval(this.showTime_1, 10000)
            }
        },
        cleanScrollTops () {
            if(this.scrollTop >= 500) {
                window.removeEventListener('scroll',this.cleanScrollTop)
        }
        },
        backToTops () {
            this.scrollTop = window.scrollY
            if (this.scrollTop >= 400) {
                this.backToTop = true
                return
            }
            else {
                this.backToTop = false
            }
        }
    },
    mounted () {
        new Swiper ('.swiper-container', {
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
            },
            effect : 'slide',
            loop: true,
            speed: 1000,
            autoplay: {
                delay: 5000
            },
            zoom: {
                toggle: false,
            },
            autoHeight: true
        })        
        window.addEventListener('scroll',this.cleanScrollTop)
        window.addEventListener('scroll',this.cleanScrollTops)
        window.addEventListener('scroll',this.backToTops)
    },
    beforeDestroy () {
        clearInterval(this.setIntervalId)
    },
    beforeUpdate () {
        if(this.scrollTop >= 500) {
            window.removeEventListener('scroll',this.cleanScrollTops)
        }
    } 
}
</script>
<style scoped>
.home {
    width: 100%;
}
.home .big-image {
    width: 100%;
}
.home .big-image img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}
.home .company-profile {
    width: 100%;
    margin-top: 40px;
    text-align: center;
}
.home .company-profile .head span {
    background-image: url("../../assets/img/down.png");
    background-repeat: no-repeat;
    width: 50px;
    height: 39px;
    display: inline-block;
    background-size: 50px 39px;
}
.home .company-profile .head h2 {
    margin-top: 20px;
    font-size: 48px; /*px*/
    color: #1e90ff;
}
.home .company-profile .head p {
    margin-top: 20px;
    font-size: 24px; /*px*/
    color: #708090;
}
.home .company-profile .content {
    width:630px;
    margin: 0 auto;
    margin-top: 60px;
    text-align: left;
}
.home .company-profile .content .advantage,.home .company-profile .content .strategy,.home .company-profile .content .custom-made {
    width: 150px;
    display: inline-block;
}
.home .company-profile .content .advantage .image,.home .company-profile .content .strategy .image-1,.home .company-profile .content .custom-made .image-2 {
    height:150px;
    box-shadow:10px 0px 18px 1px #E0E0E0; /*no*/
    border-radius: 30px; /*no*/
    display: flex;
    justify-content: center;
    align-items: center;
}
.home .company-profile .content .advantage .image div,.home .company-profile .content .strategy .image-1 div,.home .company-profile .content .custom-made .image-2 div {
    width: 93px;
    height: 102px;
}
.home .company-profile .content .advantage .image div img,.home .company-profile .content .strategy .image-1 div img,.home .company-profile .content .custom-made .image-2 div img {
    width: 100%;
    height: auto;
}
.home .company-profile .content .advantage .words,.home .company-profile .content .strategy .words-1,.home .company-profile .content .custom-made .words-2 {
    margin-top: 20px;
    text-align: center;
}
.home .company-profile .content .advantage .words h3,.home .company-profile .content .strategy .words-1 h3,.home .company-profile .content .custom-made .words-2 h3 {
    font-size: 30px; /*px*/
    color: #05173b;
    margin: 0;
}
.home .company-profile .content .advantage .words p,.home .company-profile .content .strategy .words-1 p,.home .company-profile .content .custom-made .words-2 p {
    font-size: 24px;  /*px*/
    color: #708090;
    margin-top: 18px;
}
.home .company-profile .content .strategy {
    margin-left: 80px;
}
.home .company-profile .content .custom-made {
    margin-left: 80px;
}
.home .category {
    margin: 0 auto;
    margin-top: 150px;
    width: 670px;
}
.home .category header {
    text-align: center;
}
.home .category header span {
    width: 55px;
    height: 39px;
    background: url("../../assets/img/down.png") no-repeat;
    background-size: 55px 39px;
    display: inline-block;
}
.home .category header h2 {
    font-size: 48px; /*px*/
    color: #1e90ff;
    margin-top: 20px;
}
.home .category .content {
    margin-top: 80px;
}
.home .category .content ul {
    height: 206px;
    display: flex;
}
.home .category .content ul li {
    text-align: center;
    text-align: -webkit-center;
}
.home .category .content ul .promotion {
    flex: 2;
    /* margin-top: -22px; */
    margin-top: -7px;
}
.home .category .content ul .promotion h3,.home .category .content ul .new-media h3,.home .category .content ul .brand h3,.home .category .content ul .news h3,.home .category .content ul .seo h3,.home .category .content ul .advertising h3{
    font-size: 24px; /*px*/
    color: #05173b;
    margin-top: 25px;
}
.home .category .content ul .promotion div {
    width: 139px;
    height: 141px;
    display: inline-block;
}
.home .category .content ul .promotion div img {
    width: 100%;
    height: 141px;
}
.home .category .content ul .new-media {
    /* margin-left: 71px; */
    flex: 2;
}
.home .category .content ul .new-media div {
    width: 149px;
    height: 135px;
    display: inline-block;
}
.home .category .content ul .new-media div img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}
.home .category .content ul .brand {
    /* margin-left: 90px; */
    flex: 1;
}
.home .category .content ul .brand div {
    width: 140px;
    height: 136px;
    display: inline-block;
}
.home .category .content ul .brand div img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}
.home .category .content .center-words {
    position: relative;
    height: 199px;
}
.home .category .content .words {
    width: 670px;
    background: url("../../assets/img/background-color.png") no-repeat;
    font-size: 26px; /*px*/
    color: #fff;
    height: 199px;
    text-align: left;
    position: absolute;
    background-size: 688px 199px;
}
.home .category .content .words-1 {
    background: url("../../assets/img/in-up.png") no-repeat;
    background-size: 688px 199px;
}
.home .category .content .words-2 {
    background: url("../../assets/img/upper-right.png") no-repeat;
    background-size: 688px 199px;
}
.home .category .content .words-3 {
    background: url("../../assets/img/bottom-left.png") no-repeat;
    background-size: 688px 199px;
}
.home .category .content .words-4 {
    background: url("../../assets/img/in.png") no-repeat;
    background-size: 688px 200px;
}
.home .category .content .words-5 {
    background: url("../../assets/img/right-down.png") no-repeat;
    background-size: cover;
}
.home .category .content .words p {
    padding-top: 100px;
    text-align: center;
    line-height: 40px;
}
.home .category .content .words-1 p {
    padding-top: 90px;
}
.home .category .content .words-2 p {
    padding-top: 90px;
}
.home .category .content .words-3 p {
    padding-top: 45px;
}
.home .category .content .words-4 p {
    padding-top: 30px;
}
.home .category .content .words-5 p {
    padding-top: 50px;
}
/* 
动画效果
.no-mode-translate-fade-enter-active {
  transition: all 1s;
}
.no-mode-translate-fade-enter, .no-mode-translate-fade-leave-active {
  opacity: 0;
}
.no-mode-translate-fade-enter {
  transform: translateX(261px);
} */
/* .no-mode-translate-fade-leave-active {
  transform: translateX(-461px);
} */
/* @keyframes right_move {
    from {
        left: 0rem;
        opacity: 0;
    }
    to {
        left: -1.6rem;
        opacity: 1;
    }
}
.no-mode-translate-fade-enter-active {
  transition: right_move 1s both;
}
.no-mode-translate-fade-leave-active {
  transition: right_move 1s both reverse;  
} */
.home .category .content .two-ul {
    margin-top: 20px;
    display: flex;
}
.home .category .content .two-ul .news {
    flex: 1;
}
.home .category .content .two-ul .news div {
    width: 142px;
    height:135px;
}
.home .category .content .two-ul .news div img {
    width: 100%;
    height: auto;
}
.home .category .content ul .seo {
    flex: 1;
}
.home .category .content .two-ul .advertising {
    flex: 1;
}
.home .category .content ul .seo div {
    width: 137px;
    height: 135px;
}
.home .category .content ul .seo div img {
    width: 100%;
    height: auto;
}
.home .category .content ul .seo h3 {
    margin-top: 26px;
    color: #1e90ff;
}
.home .category .content .two-ul .advertising div {
    width: 152px;
    height:136px;
}
.home .category .content .two-ul .advertising div img {
    width: 100%;
    height: auto;
}
.home .client {
    margin-top: 150px;
    margin-bottom: 50px;
}
.home .client .head {
    text-align: center;
}
.home .client .head span {
    width: 55px;
    height: 39px;
    background: url("../../assets/img/down.png") no-repeat;
    background-size: 55px 39px;
    display: inline-block;
}
.home .client .head h2 {
    font-size: 48px; /*px*/
    color: #1e90ff;
    margin-top: 20px;
}
.home .client .icon {
    width: 100%;
    margin: 0 auto;
    margin-top: 80px;
    height: 136px;
}
.home .client .icon ul li {
    display: inline-block;
    width: 120px;
    margin-left: 12px;
}
.home .client .icon ul li img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}
.home .client .icon .swiper {
    position: relative;
}
.home .client .icon .swiper .swiper-container {
    width: 700px;
    margin: 0 auto;
}
.home .top {
    width: 64px;
    height: 64px;
    position: fixed;
    right: 10px;
    top: 800px;
    z-index: 1;
}
.home .top a {
    display: inline-block;
    background: url("../../assets/img/top.png") no-repeat;
    background-size: cover;
    width: 100%;
    height: 64px;
}
.home .footer {
    width: 100%;
    height: 50px;
    background-color: #1e90ff;
    color: #fff;
    font-size: 16px; /*px*/
    margin-top: 100px;
    line-height: 50px;
    text-align: center;
}
.home .footer p {
    display: inline-block;
}
.home .footer a {
    text-decoration: none;
    color: #fff;
}
@media screen and (max-width: 640px) and (min-width: 640px) {
/* .home .contact-us .contact-information .business,.home .contact-us .contact-information .channel {
    margin-left: 16px;
}
.home .category .content ul .new-media {
    margin-left: 30px;
}
.home .category .content ul .brand {
    margin-left: 30px;
}
.home .category .content .two-ul .seo {
    margin-left: 85px;
}
.home .category .content .two-ul .advertising {
    margin-left: 68px;
} */
.home .company-profile .content .strategy {
    margin-left: 45px;
    width: 169px;
}
.home .company-profile .content .custom-made {
    margin-left: 50px;
    width: 169px;
}
.home .company-profile .content .advantage {
    width: 169px;
}
.home .category .content ul .new-media {
    flex: 1.5;
}
.home .category .content ul .brand {
    flex: 1;
}
.home .category .content ul .seo {
    flex: 1;
}
}
/* 
@media screen and (max-width: 374px) and (min-width: 360px) {
.home .category .content ul .new-media {
    margin-left: 62px;
}
.home .category .content ul .brand {
    margin-left: 60px;
}
.home .category .content .two-ul .seo {
    margin-left: 95px;
}
.home .category .content .two-ul .advertising {
    margin-left: 82px;
}
}
@media screen and (max-width: 768px) and (min-width: 411px) {
.home .category .content ul .new-media {
    margin-left: 90px;
}
.home .category .content ul .brand {
    margin-left: 90px;
}
.home .category .content .two-ul .seo {
    margin-left: 100px;
}
.home .category .content .two-ul .advertising {
    margin-left: 95px;
}
} */
</style>
